﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Profile.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="contentPane" runat="server">
    <script type="text/javascript" src="../../Scripts/date.js"></script>
    <script type="text/javascript">

        function fbFetch() {
            //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
            var accessToken = $("#authToken").val();
            var url = "https://graph.facebook.com/me/feed?limit=5&access_token=" + accessToken + "&callback=?";

            //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
            $.getJSON(url, function (json) {
                var html = "<ul>";
                //loop through and within data array's retrieve the message variable.
                $.each(json.data, function (i, fb) {

                    var msg = (typeof (fb.message) != "undefined") ? fb.message : "";

                    var date = fb.created_time;
                    date = date.replace("+0000", "");
                    var d1 = Date.parse(date);
                    date = d1.toString("M/d/yyyy");

                    if (fb.type == "photo") {

                        var photo;
                        console.log("https://graph.facebook.com/" + fb.object_id + "?access_token=" + accessToken);
                        $.getJSON("https://graph.facebook.com/" + fb.object_id + "?access_token=" + accessToken, function (json) {
                            console.log(json);

                            if (json.picture) {
                                console.log(json.id);
                                photo = json.picture;
                                $("#image" + json.id).attr("src", photo);
                            }

                        });
                        //html += "<li class='author'><img id='image" + fb.object_id + "'/><a href='" + fb.link + "'>" + msg + "</a></li><br>";
                        html += "<li class='author'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></li>";
                        html += "<li class='content'><b>" + fb.from.name + "</b> at <span class='date'>" + date + "</span><br><img id='image" + fb.object_id + "'/><a href='" + fb.link + "'><br>" + msg + "</a></li><br>";
                        html += "<li class='clear'></li>";
                    }

                    else if (fb.link) {
                        //html += "<li class='author'><img src='" + fb.picture + "'/><a href='" + fb.link + "'>" + msg + "</a></li><br>";
                        html += "<li class='author'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></li>";
                        html += "<li class='content'><b>" + fb.from.name + "</b> at <span class='date'>" + date + "</span><br><img src='" + fb.picture + "'/><a href='" + fb.link + "'><br>" + fb.story + "</a></li><br>";
                        html += "<li class='clear'></li>";
                    }

                    else if (fb.story) {

                        html += "<li class='author'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></li>";
                        html += "<li class='content'><b>" + fb.from.name + "</b> at <span class='date'>" + date + "</span><br>" + fb.story;
                        if (fb.actions && fb.actions.length > 2) {
                            html += " - <a href='" + fb.actions[2].link + "'>" + fb.story + "</a>";
                        }
                        html += "</li><br>";
                        html += "<li class='clear'></li>";
                    }
                    else {
                        html += "<li class='author'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></li>";
                        html += "<li class='content'><b>" + fb.from.name + "</b> at <span class='date'>" + date + "</span><br>" + msg + "<br>";
                        if (fb.comments.count > 0) {
                            html += "<br><img src='https://graph.facebook.com/" + fb.comments.data[0].from.id + "/picture' WIDTH='32px' HEIGHT='32px'/>" + fb.comments.data[0].from.name + "<br>" + fb.comments.data[0].message;
                        }
                        html += "</li>";
                        html += "<li class='clear'></li>";
                    }
                });
                html += "</ul>";


                //A little animation once fetched
                //$('.facebookfeed').animate({ opacity: 0 }, 500, function () {

                $('.facebookfeed').html(html);

                //});

                //$('.facebookfeed').animate({ opacity: 1 }, 500);

            });


        };

    </script>
    <script type="text/javascript">
        window.onload = fbFetch;
    </script>
    <div class="facebookfeed">
        <h2>
        </h2>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentLinks" runat="server">
</asp:Content>
